<!--Created by 熊超超(https://github.com/ccqiuqiu) on 2018/1/11.-->
<template>
  <mu-card>
    <img src="../../../assets/image/back.jpg" style="position:absolute;z-index:0;height:100%"/>
    <mu-card-title title="注册" subTitle="会员注册"/>
    <mu-card-text>
      <mu-text-field v-model="userName" hintText="请输入用户名" />
      <mu-text-field v-model="passWord" type="password" hintText="请输入密码"/>
      <mu-text-field v-model="nickName" hintText="昵称"/>
      <div flex="cross:center main:justify">
        <mu-icon-button @click="register">
          <cc-icon name="login" size="36" color="#ff4081"/>
        </mu-icon-button>
      </div>
    </mu-card-text>
  </mu-card>
</template>

<script>
  import {mapState} from 'vuex'
  // import md5 from '$js/md5'

  export default {
    data() {
      return {
        headerBar: {
          title: () => <div>我的</div>,
          rightBtn: 'more'
        },
        userName: '',
        passWord: '',
        nickName: ''
      }
    },
    computed: {
      ...mapState([])
    },
    methods: {
      register () {
        if (this.userName === '' || this.passWord === '' || this.nickName === '') {
          alert('请输入正确的账号密码和昵称')
        } else {
          this.$store.dispatch('register', {userName: this.userName, passWord: this.passWord, nickName: this.nickName}).then(
          data => {
            if (data.success) {
              alert('注册成功，请登录')
              this.$r.push('/my')
            }
          }
        )
        }
      }
    }
  }
</script>

